<template>
    <div>
        <div class="bg">
            <img class="auto" src="../assets/4.jpg" alt="">
            <div class="cloudIcon"></div>
            <div class="date">更新日期:{{currentTime}} </div>
        </div>
        <!--歌曲列表-->
        <div class="list-box">
            <div class="list" v-for="(item,index) in hotSongs" :key="index">
                <div class="num">{{index+1>9?index+1:"0"+(index+1)}}</div>
                <div class="list-desc">
                    <div class="list-desc-top">{{item.name}}</div>
                    <div class="list-desc-bottom-box">
                        <div></div>
                        <div class="list-desc-bottom">{{item.ar[0].name}} - {{item.name}}</div>
                    </div>
                </div>
                <div @click="getId(item)">
                    <div v-show="item.isplay" class="play">
                        <img src="../assets/下载.gif" alt="">
                    </div>
                    <div v-show="!item.isplay" class="list-icon"></div>
                </div>
            </div>
            <audio ref="audio" autoplay :src="`https://music.163.com/song/media/outer/url?id=${url}.mp3`"></audio>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Hot",
        data(){
            return{
                currentTime:'',
                hotSongs:[],
                url:""
            }
        },
        created(){
            this.getCurrentTime(),
            this.getHotSongs()
        },
        methods:{
            //获取音乐id
            getId(e){
                this.hotSongs.forEach((item)=>{
                    item.isplay=false
                })
                let p = this.$refs.audio
                e.isplay=!e.isplay
                if(this.url==e.id){
                    if(p.paused){
                        p.play()
                        return
                    }
                    e.isplay=!e.isplay
                    p.pause();
                    return
                }
                console.log(e);
                this.url=e.id
                p.play()
            },
            //获取当前时间
            getCurrentTime(){
                let time = new Date()
                let month = time.getMonth()+1
                let day = time.getDate()
                month = month>10 ? month:"0"+month
                this.currentTime=month+"月"+day+"日"
            },
            //获取最新音乐
            getHotSongs(){
                this.axios({
                    methods:"get",
                    url:"https://apis.netstart.cn/music//playlist/detail",
                     //参数
                    params:{
                        id:3778678,
                    },
                }).then((res)=>{
                    res.data.playlist.tracks.forEach((item)=>{
                        item.isplay=false;
                    })
                    this.hotSongs=res.data.playlist.tracks.splice(0,20)
                    console.log("最新音乐数据==>",this.hotSongs);
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.play{
    width: 22px;
    height: 22px;
    img{
        width: 100%;
    }
}
.list-desc-bottom{
    margin-left: 10px;
    width: 300px;
}
.list-desc-bottom-box{
    display: flex;
    align-items: center;
    justify-content:space-between;

}
.list-desc-bottom-box div:nth-child(1){
    // margin-top: 4px;
    width: 10px;
    height: 10px;
    background: url('../assets/3.png') no-repeat 0 0;
	background-size: 166px 97px;
	width: 12px;
	height: 8px;
    align-items: center;
}
.list-desc-top{
    font-size: 16px;
}
.list-desc{
    width: 300px;
}
.num{
    width: 20px;
    font-size: 16px;
}
.bottompic{
    background: url('../assets/3.png') no-repeat 0 0;
	background-size: 166px 97px;
	width: 12px;
	height: 8px;
    align-items: center;
}
.list-icon{
	background: url('../assets/3.png') no-repeat -24px 0;
	background-size: 166px 97px;
	width: 22px;
	height: 22px;
}
.list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
    padding: 5px 10px 10px 0;
    border-bottom: 1px solid #cccccc;
}
.bg{
    height: 146px;
    position: relative;
}
.auto{
    width: 100%;
    display: block;
}
.date{
    position: absolute;
    bottom: 35px;
    left: 20px;
    color: white;
}
.cloudIcon{
    position: absolute;
    left: 20px;
    top: 20px;
    background: url('../assets/3.png') no-repeat -24px -30px;
	background-size: 166px 97px;
	width: 142px;
	height: 67px;
}
</style>